<template>
	<view
		class="custom-button"
		:class="{disabled: disabled ? true : false}"
		:disabled="disabled"
		:style="{
			color: color,
			background: background,
			width: width + 'rpx',
			height: height + 'rpx',
			fontSize: size + 'rpx',
			opacity: disabled ? 0.7 : opacity,
			borderRadius: borderRadius + 'rpx', 
		}"
		@click="onClick"
		@touchstart="onTouch"
		@touchend="onTouchEnd"
		@touchcancel="onTouchEnd"
	>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		props: {
			disabled: {
				type: Boolean,
				default: false,
			},
			width: {
				type: Number,
				default: 612,
			},
			height: {
				type: Number,
				default: 76,
			},
			styles: {
				type: Object,
				default: function () {
					return {}
				},
			},
			size: {
				type: Number,
				default: 30,
			},
			color: {
				type: String,
				default: '#FFF',
			},
			background: {
				type: String,
				default: '#1F8EFF',
			},
			borderRadius: {
				type: Number,
				default: 8,
			}
		},
		data() {
			return {
				opacity: 1,	// 按钮透明度
			};
		},
		methods: {
			onClick() {
				if (this.disabled) {
					return;
				}
				// 传给父组件
				this.$emit('click');
			},
			
			onTouch() {
				if (this.disabled) {
					return;
				}
				this.opacity = 0.7;
			},
			
			onTouchEnd() {
				if (this.disabled) {
					return;
				}
				this.opacity = 1;
			}
		},
	}
</script>

<style lang="scss">
	
	.custom-button {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.disabled {
		opacity: 0.7!important;
	}
</style>
